<!doctype html>
<html lang="en">
  <head>
    <!-- 使用 Vite 的注入器注入<meta>标签以启用基于 CSP 的功能 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 + TypeScript</title>
    <!-- Vite 会自动注入带有哈希的 CSS 和 JS 文件 -->
  </head>
  <body>
    <div id="app"><!-- Vue 应用将挂载在这里 --></div>

    <!-- Vite 会自动注入带有哈希的 Vue 运行时和编译器的脚本 -->
    <script type="module" src="/src/main.ts"></script>
    <script>
      const preloadManger = (urls = [], maxCount = 5) => {
        const results = [];
        let current = 0;
        // 去请求
        // 生成 promise
        const genPromise = (i) => {
          const urlL = urls.slice(current, current + i);
          while (urlL.length) {
            Promise.resolve(urlL[0]).then((url) => {
              return loader(url).then((res) => {
                results[current] = res;
                genPromise(1);
              });
            });
            current++;
            urlL.shift();
          }
        };
        genPromise(maxCount);
      };

      // 进行异步请求
      const loader = async (url) => {
        console.log("我要打印的值:", "url", url);
        const res = await fetch(url).then((res) => res.json());
        console.log("res", res);
        return res;
      };

      const urls = [];
      for (let i = 1; i <= 20; i++) {
        urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
      }

      preloadManger(urls, 5);
    </script>
  </body>
</html>
